<template>
  <div class='emoji-content'>
    <div @click='initEmoji' class='emoji-box__toolbar'>
      <i class='iconfont icon-biaoqing' style='font-size: 20px;color: var(--color-sub)'></i>
    </div>
    <el-dialog v-model='isShow' :fullscreen="isMobile">
      <el-tabs v-model='activeName' class='tabs-main' v-loading='loading' tab-position='bottom'>
        <el-tab-pane v-for='(item, index) in emo.emoData' :key='index' :label='item.name' :name='item.id'>
          <ul class='emoji-list'>
            <li @click='pushToComment($event, pic.icon, pic.name)' v-for='pic in item.list'
                :key='pic.id' class='emoji-item'>
              <img :src='pic.icon' :alt='pic.name' class='emoji' referrerpolicy='no-referrer' :title='pic.name'>
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script lang='ts'>
import { useGenshinEmo } from '@/stores/Emoji'
import { defineComponent, ref, toRef } from 'vue'
import { ElMessage } from 'element-plus/es'
import { useCommonStore } from '@/stores/common'

export default defineComponent({
  name: 'Emoji',
  emits: ['emoji-url'],
  setup(props, { emit }) {
    const commonStore = useCommonStore()
    const loading = ref(true)
    const activeName = ref(0)
    const emo = useGenshinEmo()
    let loaded = false
    const isShow = ref(false)
    const initEmoji = async () => {
      try {
        isShow.value = !isShow.value
        if (!loaded) {
          await emo.getEmotion()
          emo.emoData.splice(0, 1)
          emo.emoData.pop()
          activeName.value = emo.emoData[0].id
          loading.value = false
          loaded = true
        }
      } catch (e) {
        ElMessage({
          message: 'Emoji组件出现问题',
          type: 'warning'
        })
      }
    }
    const pushToComment = (e: MouseEvent, icon: string, name: string) => {
      emit('emoji-url', icon, name)
      isShow.value=false
    }
    return {
      loading,
      activeName,
      isShow,
      initEmoji,
      emo,
      pushToComment,
      isMobile: toRef(commonStore.$state, 'isMobile')
    }
  }
})
</script>

<style scoped>
.emoji-box__toolbar{
  cursor: pointer;
}
.emoji-content {
    display: inline-block;
    margin-top: 1.25rem;
    position: relative;
    flex-shrink: 0;
}

.emoji-list {
    overflow-y: auto;
    overflow-x: hidden;
    height: 248px;
    padding: 0 12px 8px;
    display: flex;
    flex-flow: wrap;
}

.emoji-item {
    display: block;
    width: 60px;
    height: 60px;
    margin: 5px;
    vertical-align: bottom;
    background-size: cover;
    background-position: center;
}

.emoji-item:hover {
    scale: 1.2;
}
.emoji-item:hover:active {
    scale: 1.1;
}
</style>
